<template>
  <div class='container'>
    <!-- el-card将信息聚合在卡片容器中展示。 -->
    <el-card>
      <!-- 按钮行 -->
      <div class="btn-warper">
        <span style="font-size: 12px; color: pink;">说明：目前支持学科和关键字条件筛选</span>
        <el-button type="success" icon="el-icon-edit" size="small" @click="$router.push('new')">新增试题</el-button>
      </div>
      <!-- 表单 -->
      <el-form :model="formInline" class="demo-form-inline" label-width="80px" size="small" ref="clearForm">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科" prop="subjectID">
              <el-select v-model="formInline.subjectID" placeholder="请选择" @change="changeSubject" style="width:100%">
                <el-option :label="item.label" :value="item.value" v-for="item in renderList" :key="item.id"></el-option>
              </el-select>
            </el-form-item></el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" prop="catalogID">
              <el-select v-model="formInline.catalogID" placeholder="请选择" style="width:100%">
                <el-option :label="item.label" :value="item.value" v-for="item in menuList" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" prop="tags">
              <el-select v-model="formInline.tags" placeholder="请选择" style="width:100%">
                <el-option :label="item.label" :value="item.value" v-for="item in tagsList" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键词" prop="keyword">
              <el-input v-model="formInline.keyword" placeholder="根据题干搜索" style="width:100%"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="试题类型" prop="questionType">
              <el-select v-model="formInline.questionType" placeholder="请选择" style="width:100%">
                <el-option :label="item.label" :value="item.value" v-for="item in questionType" :key="item.value"></el-option>
              </el-select>
            </el-form-item></el-col>
          <el-col :span="6">
            <el-form-item label="难度" prop="difficulty">
              <el-select v-model="formInline.difficulty" placeholder="请选择" style="width:100%">
                <el-option :label="item.label" :value="item.value" v-for=" item in difficulty" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向" prop="direction">
              <el-select v-model="formInline.direction" placeholder="请选择" style="width:100%">
                <el-option :label="item" :value="index" v-for=" (item,index) in direction" :key="index"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" prop="creatorID">
              <el-select v-model="formInline.creatorID" placeholder="请选择" style="width:100%">
                <el-option :label="item.username" :value="item.id" v-for="item in userList" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="题目备注" prop="题目备注">
              <el-input v-model="formInline.remarks" style="width:100%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" prop="shortName">
              <el-input v-model="formInline.shortName" style="width:100%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市" prop="province">
              <el-select v-model="formInline.province" placeholder="请选择" style="width:50%" @change="selectCity">
                <el-option :label="item" :value="index" v-for="( item,index ) in city" :key="index"></el-option>
              </el-select>
              <el-select v-model="formInline.city" placeholder="请选择" style="width:48%; margin-left:2%">
                <el-option :label="item" :value="index" v-for="( item,index ) in area" :key="index"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="text-align:right">
              <el-button @click="clear">清除</el-button>
              <el-button type="primary" @click="formSearch">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 分割条 -->
      <el-alert :title="`数据一共 ${tableList.counts} 条`" type="info" show-icon :closable="false" style="margin-bottom: 20px;"></el-alert>
      <!-- 表格 -->
      <el-table :data="tableData" :header-cell-style="tableHeaderStyle" :key="itemKey">
        <el-table-column prop="number" label="试题编号">
        </el-table-column>
        <el-table-column prop="subject" label="学科">
        </el-table-column>
        <el-table-column prop="catalog" label="目录">
        </el-table-column>
        <el-table-column prop="questionType" label="题型">
          <template v-slot="{ row }">
            <span>{{ row.questionType==='1' ? '单选' : row.questionType==='2' ? '多选' : '简答' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="question" label="题干">
          <template v-slot="{row}">
            <span v-html="row.question"></span>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间">
        </el-table-column>
        <el-table-column prop="difficulty" label="难度">
          <template v-slot="{ row }">
            <span>{{ row.difficulty==='1' ? '简单' : row.difficulty==='2' ? '一般' : '困难' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人">
        </el-table-column>
        <el-table-column label="操作" width="230px">
          <template v-slot="{row}">
            <!-- <el-popover placement="top-start"  trigger="hover" content="预览" :visible-arrow="false"> -->
            <el-button type="primary" plain circle @click="view(row)" slot="reference" title="预览">
              <i class="el-icon-view"></i></el-button>
            <!-- </el-popover> -->
            <el-button type="success" plain circle @click="edit(row)" title="编辑">
              <i class="el-icon-edit"></i></el-button>
            <el-button type="danger" plain circle @click="del(row)" title="删除">
              <i class="el-icon-delete"></i></el-button>
            <el-button type="warning" plain circle @click="collect(row)" title="加入精选">
              <i class="el-icon-check"></i></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="end" style="margin-top:20px;margin-left:70px">
        <el-pagination background layout=" prev, pager, next,sizes,jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="+tableList.pagesize" :total="tableList.counts" :current-page="tableList.pages" :page-sizes="[5, 10, 20, 50]">
        </el-pagination>

      </el-row>
    </el-card>
    <!-- 处理预览dialog -->
    <questionsPreview :showDialog.sync="dialogVisible" :currentId="currentId" ref="addDetail"></questionsPreview>
  </div>
</template>

<script>
import { simple } from '../../api/hmmm/subjects'
// 目录
import { simple as directorysSimple } from '../../api/hmmm/directorys'
// 标签
import { simple as tagsSimple } from '../../api/hmmm/tags'
// 试题类型
import { list } from '../../api/hmmm/questions'
import { difficulty, questionType, direction } from '../../api/hmmm/constants'
//录入人
import { simple as userList } from '../../api/base/users'
// 城市 省份
import { provinces, citys } from '../../api/hmmm/citys'
import moment from 'moment'
// 引入试题预览对话框
import questionsPreview from '../components/questions-preview.vue'
import router from '../router'
import { remove as questionRemove } from '../../api/hmmm/questions'

import { choiceAdd } from '../../api/hmmm/questions'

export default {
  data() {
    return {
      formInline: {
        subjectID: null, //学科
        catalogID: null, //目录
        tags: '', //标签
        keyword: '', //关键词
        questionType: '', //试题类型
        difficulty: '', //难度
        direction: '', //方向
        creatorID: null, //录入人
        shortName: '', //企业简称
        remarks: '', //题目备注
        city: '', //城市
        province: '' //省份
      },
      renderList: [], //渲染学科
      menuList: [], //渲染目录
      tagsList: [], //标签目录
      difficulty,
      questionType,
      direction,
      userList: [], //录入人
      city: [], //省份
      area: [], //区域
      tableData: [], //表格数组
      tableList: {
        pages: 1, //当前页数
        pagesize: 5, //每页显示多少条
        counts: 5 //页总数
      },
      dialogVisible: false, //控制预览的弹窗
      currentId: null, //将当前点击行的id传给子组件
      itemKey: null
    }
  },
  components: {
    questionsPreview
  },
  created() {
    this.getSimple()
    this.getUserList()
    this.city = provinces()
    this.getDetail()
  },
  methods: {
    async getSimple() {
      const res = await simple()
      // console.log(res.data)
      this.renderList = res.data
    },
    // 二级目录
    async changeSubject() {
      const res = await directorysSimple({ subjectID: this.formInline.subjectID })
      // console.log(res.data)
      this.menuList = res.data
      //标签
      const result = await tagsSimple({ subjectID: this.formInline.subjectID })
      // console.log(result)
      this.tagsList = result.data
    },
    // 录入人
    async getUserList() {
      const res = await userList()
      // console.log(res.data)
      this.userList = res.data
    },
    // 城市
    selectCity(e) {
      // console.log(e) //拿到对应的索引
      const res = citys(this.city[e]) //通过索引拿到对应的item
      this.area = res
    },
    //处理表格渲染
    async getDetail() {
      const res = await list(this.tableList)
      // console.log(res.data)
      this.tableList = res.data
      this.itemKey = Math.random()
      res.data.items.forEach(item => {
        item.addDate = moment(item.addDate).format('YYYY-MM-DD HH:mm:ss')
      })
      this.tableData = res.data.items
    },
    //处理分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.tableList.pagesize = val
      this.tableList = this.getDetail(this.tableList)
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.tableList.pages = val
      this.tableList = this.getDetail(this.tableList)
    },
    // 处理预览
    view(row) {
      this.dialogVisible = true //打开弹框
      this.currentId = row.id //传id给子组件
      this.$nextTick(() => {
        this.$refs.addDetail.questionDetail() //调用子组件身上的方法
      })
    },
    //处理编辑
    edit(row) {
      this.$router.push({
        path: 'new',
        query: {
          id: row.id
        }
      }) //路由跳转到试题录入页面且传参
    },
    //处理删除
    del(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await questionRemove({ id: row.id }) //调取删除接口
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getDetail() //调取方法重新渲染页面
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    //处理收藏
    collect(row) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(async () => {
          await choiceAdd({ id: row.id, choiceState: 1 })
          this.$message({
            type: 'success',
            message: '加入精选成功!'
          })
          // this.$router.push('choice')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消加入精选'
          })
        })
    },
    //清除form表单
    clear() {
      this.$refs.clearForm.resetFields()
      this.formInline.tags = ''
      this.formInline.remarks = ''
      this.formInline.city = ''
      this.getDetail()
    },
    // 处理表单搜索
    async formSearch() {
      this.tableList.pages = 1
      const res = await list({
        keyword: this.formInline.keyword,
        ...this.tableList
      })
      this.tableData = res.data.items
    },
    //处理表头
    tableHeaderStyle() {
      return 'background:#fafafa; border-bottom:2px solid #e8e8e8;'
    }
  }
}
</script>

<style scoped lang='scss' >
.container {
  margin: 10px;
}

.btn-warper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
</style>
